<template>
  <div>
    <div class="section" id="section1" style="position: relative; z-index: -1">
      <el-carousel
        trigger="click"
        loop
        height="100vh"
        indicator-position="none"
      >
        <el-carousel-item>
          <img
            src="@/assets/front_home.jpg"
            alt=""
            style="height: 100%; width: 100%"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="@/assets/front_home1.jpg"
            alt=""
            style="height: 100%; width: 100%"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="@/assets/front_home2.jpg"
            alt=""
            style="height: 100%; width: 100%"
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 产物 -->
    <div
      class="section"
      id="section2"
      style="
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow: 0 -60px 30px rgba(0, 0, 0, 0.5);
      "
    >
      <!-- 标题 -->
      <div
        style="
          width: 100%;
          padding: 30px 0 50px 0;
          text-align: center;
          color: #eee;
          font-size: 50px;
          letter-spacing: 30px;
        "
      >
        产物介绍
      </div>

      <div
        style="
          display: flex;
          position: relative;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        "
      >
        <!-- 刷新图标 -->
        <div
          :class="['refresh', refreshing ? 'refreshing' : '']"
          @click="handleRefresh"
        >
          <i class="el-icon-refresh"></i>
        </div>
        <!-- 产物标签 -->
        <div class="types-tag-list">
          <div
            :class="['types-tag', item.id === activeTag ? 'active' : '']"
            v-for="item in leftData"
            @click="changeTag(item)"
          >
            <img
              v-if="item.avatarUrl"
              :src="item.avatarUrl"
              alt=""
              style="height: 100%; width: 100%; margin: 0; border-radius: 50%"
            />
            <img
              v-else
              src="@/assets/logo1.png"
              alt=""
              style="height: 100%; width: 100%; margin: 0; border-radius: 50%"
            />
          </div>
        </div>
        <div class="types-tag-list">
          <div
            :class="['types-tag', item.id === activeTag ? 'active' : '']"
            v-for="item in rightData"
            @click="changeTag(item)"
          >
            <img
              v-if="item.avatarUrl"
              :src="item.avatarUrl"
              alt=""
              style="height: 100%; width: 100%; margin: 0; border-radius: 50%"
            />
            <img
              v-else
              src="@/assets/logo1.png"
              alt=""
              style="height: 100%; width: 100%; margin: 0; border-radius: 50%"
            />
          </div>
        </div>

        <!-- 产物信息 -->
        <div
          style="
            position: relative;
            width: 40vw;
            min-height: 40vh;
            background-color: rgba(255, 255, 255, 0.2);
            color: #eee;
            margin-left: 30px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 2vh;
          "
        >
          <h1>{{ currentTag.goodsName }}</h1>
          <div style="margin-bottom: 20px">
            <span style="margin-right: 40px">
              <el-tag type="info" effect="dark">源自</el-tag>
              {{ sourceName }}
            </span>
            <span>
              <el-tag type="info" effect="dark">属于</el-tag>
              {{ goodstypeName }}
            </span>
          </div>
          <p>
            <el-tag type="info" effect="dark">备注</el-tag>
            <br />
            <span>{{ currentTag.remark }}</span>
          </p>
          <div class="button" @click="$router.push('/front/goodsList')">
            <span>全部产物</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
    </div>

    <div
      id="section3"
      style="height: 30vh; background-color: rgba(0, 0, 0, 0.9)"
    >
      第三节
    </div>

    <!-- 右侧导航 -->
    <div class="side-right">
      <div class="side-dot">
        <a href="#section1">
          <i></i>
          <p>首页</p>
        </a>
        <a href="#section2">
          <i></i>
          <p>介绍</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrontHome',
  data() {
    return {
      goodsData: [],
      goodstypeData: [],
      sourceData: [],
      leftData: [],
      rightData: [],
      activeTag: 0,
      refreshing: false,
      currentTag: []
    }
  },
  beforeMount() {
    this.loadGoods()
    this.loadGoodstype()
    this.loadSource()
  },
  computed: {
    sourceName() {
      let temp = this.sourceData.find(item => {
        return item.id == this.currentTag.sourceId
      })

      return temp && temp.sourceName
    },
    goodstypeName() {
      let temp = this.goodstypeData.find(item => {
        return item.id == this.currentTag.goodsTypeId
      })

      return temp && temp.goodsTypeName
    }
  },
  methods: {
    handleRefresh() {
      if (this.refreshing) return
      this.refreshing = true
      this.getLeftData()
      this.getRightData()

      setTimeout(() => {
        this.refreshing = false
      }, 1000)
    },
    getLeftData() {
      let start = Math.floor(Math.random() * this.goodsData.length)

      this.leftData = this.goodsData.slice(start, start + 3)

      this.currentTag = this.leftData[0]
      this.activeTag = this.leftData[0].id
    },
    getRightData() {
      let start = Math.floor(Math.random() * this.goodsData.length)

      this.rightData = this.goodsData.slice(start, start + 2)
    },
    changeTag(item) {
      if (item.id === this.currentTag.id) {
        return
      } else {
        this.currentTag = item
        this.activeTag = item.id
      }
    },
    loadGoods() {
      this.$http
        .get('/goods/list?goodsName=&goodsTypeId=&sourceId=')
        .then(res => {
          console.log('获取到的产物数据为：', res)
          if (res.code == 200) {
            this.goodsData = res.data

            this.getLeftData()
            this.getRightData()
          } else {
            this.$message.error('获取数据失败！')
          }
        })
    },
    loadGoodstype() {
      this.$http.get('/goodstype/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.goodstypeData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadSource() {
      this.$http.get('/source/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.sourceData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.section {
  min-height: 100vh;
}
.refresh {
  position: absolute;
  top: -25%;
  left: 15%;
  font-size: 60px;
  color: #eee;
  cursor: pointer;
}
.refreshing {
  transform: rotate(-360deg);
  transition: transform 1s ease;
}
.types-tag-list {
  width: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .types-tag {
    height: 80px;
    width: 80px;
    border: 2px solid rgb(225, 226, 230);
    border-radius: 50%;
    cursor: pointer;

    &:nth-child(n + 2) {
      margin-top: 20px;
    }

    &:hover {
      -webkit-filter: brightness(130%);
      filter: brightness(130%);
    }

    &.active {
      -webkit-filter: brightness(130%);
      filter: brightness(130%);
    }
  }
}
.button {
  width: 150px;
  height: 36px;
  border: 1px #fff solid;
  color: #fff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  line-height: 36px;
  position: absolute;
  bottom: -10vh;
  right: 0vh;
  transition: all 1s;

  i {
    transition: all 1s;
  }

  &:hover {
    i {
      transform: translate(10px);
      transition: all 1s;
    }
  }
}

.side-right {
  height: 100%;
  width: 90px;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: 30px;
  transition: all 0.5s ease;

  .side-dot {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translate3d(0, -50%, 0);

    a.active i,
    a:hover i {
      border-color: #c61a18 !important;
    }
    a.active p,
    a:hover p {
      opacity: 1;
      filter: alpha(opacity = 100);
    }
    a {
      cursor: pointer;

      i {
        width: 4px;
        height: 4px;
        border: 2px #fff solid;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
        transition: all ease 0.3s;
      }
      p {
        color: #fff;
        font-size: 14px;
        margin: 10px auto 24px;
        text-align: center;
        opacity: 0;
        filter: alpha(opacity = 0);
        transition: all ease 0.3s;
      }
    }
  }
}
</style>
